<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include.jsp"%>
<div class="container">
		<fieldset class="layui-elem-field" style="padding: 10px;">
	 		<legend><b>检索区域</b></legend>
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-inline">
					<label class="layui-form-label">班级名称</label>
					<div class="layui-input-block">
						<input name="status" type="hidden" value="1">
						<input name="name" autocomplete="off" class="layui-input" type="text" placeholder="请输入班级名称">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">班级描述</label>
					<div class="layui-input-inline">
						<input name="description" autocomplete="off" class="layui-input" type="text" placeholder="请输入班级描述">
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-normal" id="searchBtn" lay-submit lay-filter="searchClasses">开始检索</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</fieldset>
		<div class="handle-btn listTopFixed">
			<button class="layui-btn layui-btn-small addClasses" data-url="/console/classes/create/"><i class="layui-icon"></i>添加</button>
			<button class="layui-btn layui-btn-small layui-btn-danger delClasses" data-url="/console/classes/del/"><i class="layui-icon"></i> 删除</button>
		</div>

		<div class="table-list">
			<table class="layui-table" lay-skin="line" id="dateTable">
				<thead>
					<tr>
						<th>
							<input type="checkbox" name="item[all]" lay-skin="primary" class="my-checkbox">
						</th>
						<th>编号</th>
						<th>班级名称</th>
						<th>班级描述</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="classesContent">
				</tbody>
			</table>
			
			<div id="pagination"></div>
		</div>
	</div>

<script id="classes-tpl" type="text/html">

{{#  layui.each(d.data, function(index, item){ }}
  <tr  data-assign="1" class="tableTrSelect">
	<td><input type="checkbox" name="item[{{item.classesId}}]" lay-skin="primary" class="my-checkbox" data-id="{{item.classesId}}"></td>
    <td>{{index}} - {{ item.classesId}}</td>
	<td>{{ item.name}}</td>
	<td>{{ item.description}}</td>
	<td>
		<a href="javascript:;" data-url="/console/classes/modify" class="layui-btn layui-btn-small edit" title="编辑" data-id="{{ item.classesId}}"><i class="layui-icon"></i></a>
	</td>
  </tr>
{{#  }); }}
 
</script>
<style>

.my-checkbox {
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border: solid 2px #28B779;
    border-radius: 2px;
    background-clip: padding-box;
    display: inline-block;
    cursor: pointer;
}
.my-checkbox:checked::before {
    position: absolute;
    display: inline-block;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    font-family: "Microsoft Yahei";
    content: "√";
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
}
.my-checkbox:checked {
    background-color: #28B779;
    border: solid 0 #28B779;
}
</style>
<script>
layui.use(['laypage', 'layer', 'form', 'laytpl'], function(){
  var laypage = layui.laypage,
  		layer = layui.layer,
  		$ = layui.jquery,
  		laytpl = layui.laytpl,
		form = layui.form();
  
  	form.render();
  	
  	var pageSize = 10 ;
  	var query = "" ;
  
 // 批量删除 返回需要的 ids
  	function getIds(o,str){
  	    var objs = o.find('tbody tr td:first-child input[type="checkbox"]:checked');
  	    var list = [];
  	    objs.each(function(index,elem){
  	      	list.push($(elem).attr(str));
  	    });
  	    // 去除最后一位逗号
  	    return list;
  	}
 
	//监听提交
	$('.addClasses').on('click',function(){
		var url = $(this).attr('data-url') ;
		var loadIndex = layer.load(); 
		layer.open({
			 title:"新增班级"
			,type: 1, 
		//  content: url //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		  content: '',
		  area: ['700px', '400px'],
		  success: function(layero, index){
			  $(layero).find('.layui-layer-content').load(url);
			  layer.close(loadIndex);     
			//  form.init() ;
		    console.log(layero, index);
		  }
		});
	}) ;
	
	var edit = function(){
		
		$('.edit').off('click').on('click',function(){
			var url = $(this).attr('data-url') ;
			var id = $(this).attr('data-id');
			var loadIndex = layer.load(); 
			layer.open({
				 title:"编辑班级"
				,type: 1, 
			//  content: url //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
			  content: '',
			  area: ['700px', '400px'],
			  success: function(layero, index){
				  $(layero).find('.layui-layer-content').load(url+"/"+id);
				  layer.close(loadIndex);     
				//  form.init() ;
			    console.log(layero, index);
			  }
			});
		}) ;
	}
	
	//监听提交
	$('.delClasses').on('click',function(){
		var url = $(this).attr('data-url') ;
		var ids = getIds($('#dateTable'),'data-id') ;
		if(ids.length == 0){
	        layer.msg('请选择要删除的数据',{time:2000});
	        return false;
	    }else{
	        layer.confirm('确认删除选中数据?', {
	            title: '删除',
	            btn: ['确认', '取消'] // 可以无限个按钮
	        }, function(index, layero){
	            // 确认
	            $.post(url,{ids :ids.join(',')},function(rst){
	            	if(!rst){
	    	    		layer.msg('网络连接错误，请稍后再试。。。', {
	    	    			icon: 2,
	    	    			shade: [0.8, '#393D49'],
	    	  			  	anim: 6
	    	  			});
	    	    		return ;
	    	    	}
	    	    	
	    	    	if('error' == rst.code){
	    	    		layer.msg(rst.message, {
	    	    			time:2000,
	    	    			icon: 2,
	    	    			shade: [0.8, '#393D49'],
	      			  		anim: 6
	      				});
	    	    		return ;
	    	    	}
	    	    	
	    	    	layer.msg(rst.message, {
    	    			time:2000,
    	    			icon: 6,
    	    			shade: [0.8, '#393D49'],
      			  		anim: 6
      				});
	    	    	
	    	    	$('#searchBtn').trigger('click') ;
	    	    });
	        }, function(index){
	            // 关闭
	            layer.close(index);
	        });
	    }
		console.debug(ids.join(",")) ;
	}) ;
  var render = function(curr){
	  $.post('${ctx}/console/classes/pagination',{pageSize :pageSize ,page :curr ,criteria :query} ,function(rst){
		  if(!rst){
	    		layer.msg('网络连接错误，请稍后再试。。。', {
	    			icon: 2,
	    			shade: [0.8, '#393D49'],
	  			  	anim: 6
	  			});
	    		return ;
	    	}
	    	
	    	if('error' == rst.code){
	    		layer.msg(rst.message, {
	    			time:2000,
	    			icon: 2,
	    			shade: [0.8, '#393D49'],
  			  		anim: 6
  				});
	    		return ;
	    	}
	    	
	    	var getTpl = $('#classes-tpl').html();
	    	laytpl(getTpl).render(rst, function(html){
	    		$('#classesContent').html(html);
	    		edit() ;
	    	});
  	  });
  };
  
  var pagination = function(){
	  
	  $.post('${ctx}/console/classes/pages',{criteria :query} ,function(rst){
		  if(!rst){
	    		layer.msg('网络连接错误，请稍后再试。。。', {
	    			icon: 2,
	    			shade: [0.8, '#393D49'],
	  			  	anim: 6
	  			});
	    		return ;
	    	}
	    	
	    	if('error' == rst.code){
	    		layer.msg(rst.message, {
	    			time:2000,
	    			icon: 2,
	    			shade: [0.8, '#393D49'],
  			  		anim: 6
  				});
	    		return ;
	    	}
	    	$("#dateTable thead input[type='checkbox']:checkbox").prop("checked", false);
	    	$('#classesContent').empty();
	    	
    		var pages = rst.data <= 0 ? 1 :rst.data;
    		console.debug('pages is '+ pages) ;
	    	 laypage({
    			cont: "pagination"
    		    ,pages:  Math.ceil((1*pages)/pageSize)  //得到总页数
    		    ,skip:true
    		    ,jump: function(obj, first){
    		    	console.debug(" obj -> " + obj +"  first -> "+ first);
    		    	if(first && rst.data <= 0){
    		    		return ;
    		    	}
    		    	render(obj.curr);
    		    }
    		 });
	    	
  	  });
	 
  };
  
//监听提交
  form.on('submit(searchClasses)', function(data){
	  
	  query = JSON.stringify(data.field);
	  pagination() ;
      return false;
  });
  
  $('#dateTable tbody').on('click', 'tr input[type="checkbox"]', function () {
	    var obj = $(this).parent().parent();
	    if (this.checked) {
	        obj.addClass('selected');
	    } else {
	        obj.removeClass('selected');
	        $("#dateTable thead input[type='checkbox']:checkbox").prop("checked", false);
	    }
	});

	// 全选和反选
	$('#dateTable thead').on('click', 'tr input[type="checkbox"]', function () {
	    var obj = $("#dateTable tbody input[type='checkbox']:checkbox");
	    var allTr = $("#dateTable tbody tr");
	    if (this.checked) {
	        obj.prop("checked", true);
	        allTr.addClass('selected');
	    } else {
	        obj.prop("checked", false);
	        allTr.removeClass('selected');
	    }
	});

	$('#searchBtn').trigger('click') ;
});
</script>